<template>
  <div class="parent">
    <chartDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="'108px'" :height="'75px'" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>
<!-- 仪表盘 -->
<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import chartDom from "./chartDom.vue";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  },
  item: {
    type: Object,
    default: () => ({})
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
setTimeout(() => {
  isShowEcharts.value = true;
  option.value = {
    series: [
      {
        type: "gauge",
        startAngle: 210,
        endAngle: -30,
        itemStyle: {
          color: "#67e0e3"
        },
        progress: {
          show: true,
          roundCap: true,
          width: 2
        },
        pointer: {
          icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
          length: "55%",
          width: 4,
          offsetCenter: [0, "5%"]
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 2,
            color: [
              [0, "#67e0e3"],
              [1, "#FFCC00"]
            ]
          }
        },
        axisTick: {
          splitNumber: 0,
          lineStyle: {
            width: 0,
            color: "#999"
          }
        },
        splitLine: {
          length: 0,
          lineStyle: {
            width: 0,
            color: "#999"
          }
        },
        axisLabel: {
          distance: 0,
          color: "#999",
          fontSize: 0
        },
        title: {
          show: false
        },
        detail: {
          backgroundColor: "#fff",
          width: "50%",
          lineHeight: 0,
          height: 0,
          offsetCenter: [0, "90%"],
          valueAnimation: true,
          formatter: function (value) {
            return "{value|" + value.toFixed(0) + "}{unit|/ " + props.item.lifecycle_exp + "}";
          },
          rich: {
            value: {
              fontSize: 12,
              color: "#FFBD00"
            },
            unit: {
              fontSize: 12,
              color: "#000"
            }
          }
        },
        data: [
          {
            value: props.item.lifecycle_exp_left || 0
          }
        ]
      }
    ]
  };
}, 1000);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
